app/me/analytics/page.tsx (1)

11-12: Consider using const arrow functions per coding guidelines.

Both AnalyticsContent and AnalyticsPage are function declarations. The coding guidelines prefer const arrow functions with explicit type annotations.

♻️ Suggested refactor

-function AnalyticsContent() {
+const AnalyticsContent = (): JSX.Element => {
...
-export default function AnalyticsPage() {
+const AnalyticsPage = (): JSX.Element => {
...
+export default AnalyticsPage;

As per coding guidelines: "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 54-54

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/analytics/page.tsx` around lines 11 - 12, Convert the function
declarations AnalyticsContent and AnalyticsPage into const arrow functions with
explicit React/Next type annotations; replace "function AnalyticsContent() { ...
}" and "function AnalyticsPage() { ... }" with "const AnalyticsContent: React.FC
= () => { ... }" (or the appropriate NextPage/JSX.Element return type for
AnalyticsPage) and ensure any props or return types are explicitly annotated to
satisfy the coding guidelines.

components/analytics/AnalyticsChart.tsx (1)

82-95: Prefer clsx for conditional classes.

The conditional className uses a ternary operator within the template literal. The coding guidelines recommend using clsx or similar helper functions for cleaner conditional class composition.

♻️ Suggested refactor using clsx

+import clsx from 'clsx';
...
            <button
              key={r}
              onClick={() => setRange(r)}
              aria-pressed={range === r}
-             className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150 ${
-               range === r
-                 ? 'bg-gradient-to-r from-[`#06b6d4`] to-[`#4f46e5`] text-white shadow'
-                 : 'text-zinc-400 hover:text-white'
-             }`}
+             className={clsx(
+               'rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150',
+               range === r
+                 ? 'bg-gradient-to-r from-[`#06b6d4`] to-[`#4f46e5`] text-white shadow'
+                 : 'text-zinc-400 hover:text-white'
+             )}
            >

As per coding guidelines: "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsChart.tsx` around lines 82 - 95, Replace the
inline template-literal conditional classes in the AnalyticsChart component (the
ranges.map button render that calls setRange and reads range) with clsx: import
clsx at the top, then build the button className using clsx to always include
the shared classes ('rounded-lg px-3 py-1.5 text-xs font-medium transition-all
duration-150') and conditionally include the active classes ('bg-gradient-to-r
from-[`#06b6d4`] to-[`#4f46e5`] text-white shadow') when range === r, otherwise
include the inactive classes ('text-zinc-400 hover:text-white'); keep key,
onClick, aria-pressed and button children unchanged.

components/analytics/AnalyticsBentoGrid.tsx (1)

225-226: Consider using clsx for the conditional text size.

The ternary operator in the className could be replaced with clsx for consistency with coding guidelines.

♻️ Suggested refactor

+import clsx from 'clsx';
...
              <p
-               className={`font-bold tracking-tight text-white ${tile.large ? 'text-4xl' : 'text-2xl'}`}
+               className={clsx(
+                 'font-bold tracking-tight text-white',
+                 tile.large ? 'text-4xl' : 'text-2xl'
+               )}
              >

As per coding guidelines: "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsBentoGrid.tsx` around lines 225 - 226, Replace
the inline ternary in the JSX className on the <p> element inside the
AnalyticsBentoGrid component with clsx: import clsx if not already imported,
then use clsx to combine the static classes "font-bold tracking-tight
text-white" with a conditional mapping for tile.large to choose "text-4xl" or
"text-2xl" (refer to the variable tile and the <p> element where className is
set) so the conditional class follows the project's clsx convention.

lib/utils/calculateTrend.ts (2)

56-65: Consider the fallback behavior when filtering yields no results.

When filtered is empty, the fallback data.slice(-days) returns the last N data points. This is reasonable, but if days exceeds data.length, it returns the entire array. Ensure this behavior aligns with UX expectations (e.g., showing "No data" vs. showing older data outside the requested range).

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@lib/utils/calculateTrend.ts` around lines 56 - 65, In filterChartByRange, the
current fallback returns data.slice(-days) which can return the entire array
when days > data.length; change the fallback so it returns an empty array when
the requested days exceeds data.length (so the caller can show "No data") and
otherwise return the last days entries. Concretely, replace the final return so
it uses filtered.length > 0 ? filtered : (days > data.length ? [] :
data.slice(-days)), keeping the function name filterChartByRange and variables
filtered, days and data as references.

---

6-9: Consider using const arrow functions per coding guidelines.

The coding guidelines prefer const arrow functions with explicit type annotations over function declarations. This is a stylistic preference and can be deferred.

♻️ Example refactor for one function

-export function calculateTrend(
-  current: number | null | undefined,
-  previous: number | null | undefined
-): TrendResult {
+export const calculateTrend = (
+  current: number | null | undefined,
+  previous: number | null | undefined
+): TrendResult => {

As per coding guidelines: "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 26-28, 39-41, 56-58

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@lib/utils/calculateTrend.ts` around lines 6 - 9, Convert the function
declaration calculateTrend to an exported const arrow function with explicit
parameter and return type annotations (keep the same parameter names and
TrendResult return type) and replace the other function declarations in this
file with the same pattern; ensure you export the consts and preserve original
logic and symbol names (e.g., calculateTrend and the same parameter identifiers
and TrendResult) so tooling and callers remain unaffected.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

components/analytics/AnalyticsBentoGrid.tsx (3)

27-59: Use typed const arrow functions for component declarations.

TrendBadge and AnalyticsBentoGrid should match the TSX function style expected by the repo.

♻️ Suggested refactor

-function TrendBadge({ trend }: { trend: TrendResult }) {
+const TrendBadge = ({
+  trend,
+}: {
+  trend: TrendResult;
+}): JSX.Element => {
...
-}
+};

-export function AnalyticsBentoGrid({ stats, chart }: Props) {
+export const AnalyticsBentoGrid = ({
+  stats,
+  chart,
+}: Props): JSX.Element => {
...
-}
+};

As per coding guidelines, "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 85-230

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsBentoGrid.tsx` around lines 27 - 59, Change the
component declarations from function declarations to typed const arrow
functions: replace the function TrendBadge({ trend }: { trend: TrendResult }) {
... } with a const TrendBadge: React.FC<{ trend: TrendResult }> = ({ trend }) =>
{ ... } (and do the same for AnalyticsBentoGrid, using an appropriate props
interface/type and explicit React.FC or React.FunctionComponent annotation).
Ensure all React imports/types remain available (e.g., React, TrendResult) and
update any exported names to use the const bindings so the components keep the
same external API.

---

87-89: flat object identity breaks tiles memoization effectiveness.

Because flat is recreated every render, Line 165 always changes and forces tiles recomputation.

♻️ Suggested refactor

+const FLAT_TREND: TrendResult = { percentage: 0, direction: 'flat' };
...
 export function AnalyticsBentoGrid({ stats, chart }: Props) {
   const chartTrend = useMemo(() => calculateChartTrend(chart), [chart]);
-  const flat: TrendResult = { percentage: 0, direction: 'flat' };
...
-        trend: flat,
+        trend: FLAT_TREND,
...
-        trend: flat,
+        trend: FLAT_TREND,
...
-        trend: flat,
+        trend: FLAT_TREND,
...
-        trend: flat,
+        trend: FLAT_TREND,
...
-        trend: flat,
+        trend: FLAT_TREND,
...
-        trend: flat,
+        trend: FLAT_TREND,
...
-        trend: flat,
+        trend: FLAT_TREND,
...
-    [stats, chartTrend, flat]
+    [stats, chartTrend]
   );

Also applies to: 165-166

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsBentoGrid.tsx` around lines 87 - 89, The local
constant flat (type TrendResult) is recreated each render which changes its
identity and forces the useMemo for tiles to recompute; fix this by giving flat
a stable identity—either hoist it to module scope as a top-level constant (e.g.,
FLAT: TrendResult) or memoize it inside the component with useMemo/useRef—then
reference that stable flat when building tiles in the tiles useMemo so tiles
only recomputes when its real dependencies change.

---

205-216: Replace class string interpolation/ternary with a class helper.

Line 205 and Line 216 should use clsx (or equivalent) rather than template/ternary class composition in JSX.

♻️ Suggested refactor

+import clsx from 'clsx';
...
-          <motion.div
+          <motion.div
             key={tile.label}
             variants={tileVariants}
-            className={`${tile.colSpan} ${tile.rowSpan}`}
+            className={clsx(tile.colSpan, tile.rowSpan)}
           >
...
-                <p
-                  className={`font-bold tracking-tight ${tile.large ? 'text-4xl' : 'text-2xl'}`}
-                >
+                <p
+                  className={clsx(
+                    'font-bold tracking-tight',
+                    tile.large ? 'text-4xl' : 'text-2xl'
+                  )}
+                >

As per coding guidelines, "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsBentoGrid.tsx` around lines 205 - 216, Replace
the template/ternary class strings with a class helper (clsx): import clsx at
the top of the file, change the container className that uses `${tile.colSpan}
${tile.rowSpan}` to use clsx(tile.colSpan, tile.rowSpan), and change the
paragraph className that uses `font-bold tracking-tight ${tile.large ?
'text-4xl' : 'text-2xl'}` to use clsx('font-bold tracking-tight', tile.large ?
'text-4xl' : 'text-2xl'); ensure the rest of the JSX (Card, CardHeader,
CardContent, TrendBadge, tile.icon, tile.trend) is unaffected.

components/analytics/AnalyticsChart.tsx (2)

40-57: Convert function declarations to typed const arrow functions.

Both CustomTooltip and AnalyticsChart should follow the TS/TSX convention required in this repo.

♻️ Suggested refactor

-function CustomTooltip({
+const CustomTooltip = ({
   active,
   payload,
   label,
-}: TooltipProps<number, string>) {
+}: TooltipProps<number, string>): JSX.Element | null => {
   if (!active || !payload?.length) return null;
   return (
     <div className='border-border bg-card rounded-xl border px-4 py-3 shadow-xl'>
       <p className='text-muted-foreground mb-1 text-xs'>{label}</p>
       <p className='text-sm font-semibold'>
         {payload[0].value}{' '}
         <span className='text-muted-foreground font-normal'>activities</span>
       </p>
     </div>
   );
-}
+};

-export function AnalyticsChart({ chart }: Props) {
+export const AnalyticsChart = ({ chart }: Props): JSX.Element => {
   const [range, setRange] = useState<Range>('30D');
   const ranges: Range[] = ['7D', '30D', '90D', 'ALL'];
...
-}
+};

As per coding guidelines, "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 57-184

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsChart.tsx` around lines 40 - 57, Convert the
function declarations to const arrow functions with explicit type annotations:
replace "function CustomTooltip({...}: TooltipProps<number, string>)" with a
const arrow like "const CustomTooltip: React.FC<TooltipProps<number, string>> =
({...}) => { ... }" (preserve the active/payload/label handling and return JSX),
and replace "export function AnalyticsChart({ chart }: Props)" with "export
const AnalyticsChart: React.FC<Props> = ({ chart }) => { ... }" (keep existing
export, props usage, and component body). Ensure you import React types if
needed and maintain existing names and behavior for CustomTooltip and
AnalyticsChart so references elsewhere remain valid.

---

86-95: Use a named handle... click handler and a class helper for toggle buttons.

Line 89 and Line 91 currently use inline state mutation plus ternary class composition in JSX. This violates project conventions and is harder to maintain.

♻️ Suggested refactor

+import clsx from 'clsx';
...
 export function AnalyticsChart({ chart }: Props) {
   const [range, setRange] = useState<Range>('30D');
   const ranges: Range[] = ['7D', '30D', '90D', 'ALL'];
+  const handleRangeChange = (nextRange: Range): void => {
+    setRange(nextRange);
+  };
...
             {ranges.map(r => (
               <button
                 key={r}
-                onClick={() => setRange(r)}
+                onClick={() => handleRangeChange(r)}
                 aria-pressed={range === r}
-                className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150 ${
-                  range === r
-                    ? 'bg-primary text-primary-foreground shadow'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
+                className={clsx(
+                  'rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150',
+                  range === r
+                    ? 'bg-primary text-primary-foreground shadow'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
               >
                 {r}
               </button>
             ))}

As per coding guidelines, "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX" and "Event handlers should start with 'handle' prefix (e.g., handleClick, handleSubmit)".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsChart.tsx` around lines 86 - 95, Extract the
inline click handler and class ternary into named helpers: add a handler
function (e.g., handleRangeClick or handleSelectRange) that calls setRange(r)
and use it as the onClick in the ranges.map button, and replace the inline
ternary className with a clsx (or classNames) helper expression that composes
'rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150' plus
either 'bg-primary text-primary-foreground shadow' when range === r or
'text-muted-foreground hover:text-foreground' otherwise; ensure you import clsx
(or your project's class helper) and keep aria-pressed={range === r} unchanged
so behavior and accessibility remain the same.

app/me/analytics/page.tsx (2)

104-113: Refactor filter buttons to use a handle... handler and class helper.

Line 107 and Line 109 currently use inline state updates and conditional class ternaries in JSX.

♻️ Suggested refactor

+import clsx from 'clsx';
...
 function AnalyticsContent() {
   const { user, isLoading } = useAuthStatus();
   const [activityFilter, setActivityFilter] = useState('All Time');
+  const handleActivityFilterChange = (filter: string): void => {
+    setActivityFilter(filter);
+  };
...
             {FILTER_OPTIONS.map(f => (
               <button
                 key={f}
-                onClick={() => setActivityFilter(f)}
+                onClick={() => handleActivityFilterChange(f)}
                 aria-pressed={activityFilter === f}
-                className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150 ${
-                  activityFilter === f
-                    ? 'bg-primary text-primary-foreground shadow'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
+                className={clsx(
+                  'rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150',
+                  activityFilter === f
+                    ? 'bg-primary text-primary-foreground shadow'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
               >
                 {f}
               </button>
             ))}

As per coding guidelines, "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX" and "Event handlers should start with 'handle' prefix (e.g., handleClick, handleSubmit)".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/analytics/page.tsx` around lines 104 - 113, Refactor the filter button
JSX to remove the inline arrow and ternary class logic: create a handler named
handleActivityFilterClick (or handleSetActivityFilter) that calls
setActivityFilter(f) and use that in onClick instead of () =>
setActivityFilter(f); replace the conditional className string for the button
with a clsx (or classNames) call to compose classes based on activityFilter ===
f; ensure you import clsx and update the button to reference the handler and the
composed class helper while keeping the existing keys (FILTER_OPTIONS,
activityFilter, setActivityFilter) intact.

---

30-37: Use typed const arrow components instead of function declarations.

AnalyticsContent and AnalyticsPage should follow the project TSX component declaration convention.

♻️ Suggested refactor

-function AnalyticsContent() {
+const AnalyticsContent = (): JSX.Element => {
...
-}
+};

-export default function AnalyticsPage() {
-  return (
+const AnalyticsPage = (): JSX.Element => {
+  return (
     <AuthGuard
       redirectTo='/auth?mode=signin'
       fallback={<div className='p-8 text-center'>Authenticating...</div>}
     >
       <AnalyticsContent />
     </AuthGuard>
   );
-}
+};
+
+export default AnalyticsPage;

As per coding guidelines, "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 128-137

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/analytics/page.tsx` around lines 30 - 37, Convert the two function
declarations into typed const arrow components: replace the function declaration
for AnalyticsContent with a const declaration (e.g. const AnalyticsContent:
React.FC or React.FunctionComponent = () => { ... }) and do the same for
AnalyticsPage (the component referenced later around the other occurrence).
Ensure you keep the existing props/types (use GetMeResponse usage) and any
hooks/returns intact, add the appropriate React import if missing, and export
the default component the same way as before.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

lib/utils/calculateTrend.ts (1)

6-65: Apply typed const-arrow function style for exported TS utilities.

The module uses function declarations for exported helpers; repo convention prefers typed const-arrow exports.

As per coding guidelines, "Prefer const arrow functions with explicit type annotations over function declarations".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@lib/utils/calculateTrend.ts` around lines 6 - 65, Convert the exported
function declarations to typed const arrow functions: replace the function
declarations for calculateTrend, calculateChartTrend, transformChartData, and
filterChartByRange with exported consts using arrow functions and explicit
return types (e.g., export const calculateTrend = (current: number | null |
undefined, previous: number | null | undefined): TrendResult => { ... }),
preserving the existing logic and signatures (including TrendResult and
parameter types) and keep helper internals and defaulting behavior unchanged;
ensure all export names remain identical so call sites are unaffected.

components/analytics/AnalyticsBentoGrid.tsx (3)

27-59: Adopt typed const-arrow declarations for component functions in this TSX file.

TrendBadge and AnalyticsBentoGrid are function declarations; repository style asks for typed const-arrow declarations.

As per coding guidelines, "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 85-230

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsBentoGrid.tsx` around lines 27 - 59, The file
uses function declarations for React components (e.g., TrendBadge and
AnalyticsBentoGrid); convert them to typed const-arrow components with explicit
React.FC (or appropriate prop) type annotations — replace "function TrendBadge({
trend }: { trend: TrendResult })" with a const declaration like "const
TrendBadge: React.FC<{ trend: TrendResult }> = ({ trend }) => { ... }" (and do
the same for AnalyticsBentoGrid and any other component functions in the range),
ensuring you export/keep names and behaviors unchanged and update any internal
references accordingly.

---

87-89: Stabilize flat trend reference to avoid defeating useMemo dependencies.

Line 87 recreates flat on every render; Line 165 then treats it as a dependency, forcing tiles recomputation each render.

♻️ Suggested refactor

+const FLAT_TREND: TrendResult = { percentage: 0, direction: 'flat' };
...
 export function AnalyticsBentoGrid({ stats, chart }: Props) {
   const chartTrend = useMemo(() => calculateChartTrend(chart), [chart]);
-  const flat: TrendResult = { percentage: 0, direction: 'flat' };

   const tiles: TileConfig[] = useMemo(
     () => [
       ...
-        trend: flat,
+        trend: FLAT_TREND,
       ...
     ],
-    [stats, chartTrend, flat]
+    [stats, chartTrend]
   );

Also applies to: 165-166

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsBentoGrid.tsx` around lines 87 - 89, The local
const flat (TrendResult) is recreated each render, breaking memoization for
tiles (useMemo depends on flat); stabilize its reference by moving it out of the
render or memoizing it — e.g., define a module-level constant (FLAT: TrendResult
= Object.freeze({ percentage: 0, direction: 'flat' })) or wrap flat in
React.useMemo(() => ({ percentage:0, direction:'flat' }), []) and then use that
stable identifier in the tiles useMemo dependency list (update usages at the
symbols flat and tiles accordingly).

---

205-216: Use clsx for conditional class composition in tile containers/text sizes.

Lines 205 and 216 use template-string interpolation for conditional classes instead of a class helper.

As per coding guidelines, "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsBentoGrid.tsx` around lines 205 - 216, The tile
container and text-size class usages in AnalyticsBentoGrid currently use
template strings for conditional classes; import clsx (or classNames) and
replace the two spots: the outer element's className that currently interpolates
`${tile.colSpan} ${tile.rowSpan}` should become className={clsx(tile.colSpan,
tile.rowSpan)}, and the paragraph's className that uses `font-bold
tracking-tight ${tile.large ? 'text-4xl' : 'text-2xl'}` should become
className={clsx('font-bold tracking-tight', tile.large ? 'text-4xl' :
'text-2xl')}; ensure you add the clsx import at the top of the file.

components/analytics/AnalyticsChart.tsx (2)

87-95: Refactor range buttons to use handle* handler naming and clsx for conditional classes.

Line 89 uses an inline handler and Lines 91-95 use ternary string classes; this diverges from repo conventions and makes button styling logic harder to scale.

♻️ Suggested refactor

+import clsx from 'clsx';
...
 export function AnalyticsChart({ chart }: Props) {
   const [range, setRange] = useState<Range>('30D');
   const ranges: Range[] = ['7D', '30D', '90D', 'ALL'];
+  const handleRangeChange = (nextRange: Range): void => setRange(nextRange);
...
             {ranges.map(r => (
               <button
                 key={r}
-                onClick={() => setRange(r)}
+                type='button'
+                onClick={() => handleRangeChange(r)}
                 aria-pressed={range === r}
-                className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150 ${
-                  range === r
-                    ? 'bg-primary text-primary-foreground shadow'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
+                className={clsx(
+                  'rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150',
+                  range === r
+                    ? 'bg-primary text-primary-foreground shadow'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
               >
                 {r}
               </button>
             ))}

As per coding guidelines, "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX" and "Event handlers should start with 'handle' prefix (e.g., handleClick, handleSubmit)".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsChart.tsx` around lines 87 - 95, The range
buttons use an inline onClick and ternary string concatenation for className;
refactor by extracting the click logic into a named handler (e.g., create a
function handleRangeChange or handleRangeClick that calls setRange) and replace
the inline onClick with that handler, and switch the className expression to use
clsx (import clsx if not present) to conditionally apply 'bg-primary
text-primary-foreground shadow' when range === r and the muted/hover classes
otherwise; update any typings/props if needed and ensure aria-pressed still uses
range === r.

---

40-57: Use typed const arrow functions instead of function declarations in this TSX module.

CustomTooltip and AnalyticsChart are declared with function; repository convention asks for typed const-arrow declarations.

♻️ Suggested refactor

-function CustomTooltip({
+const CustomTooltip = ({
   active,
   payload,
   label,
-}: TooltipProps<number, string>) {
+}: TooltipProps<number, string>): JSX.Element | null => {
   if (!active || !payload?.length) return null;
   return (
     <div className='border-border bg-card rounded-xl border px-4 py-3 shadow-xl'>
       ...
     </div>
   );
-}
+};

-export function AnalyticsChart({ chart }: Props) {
+export const AnalyticsChart = ({ chart }: Props): JSX.Element => {
   ...
-}
+};

As per coding guidelines, "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 57-184

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/analytics/AnalyticsChart.tsx` around lines 40 - 57, Replace the
function declarations with typed const-arrow components: change CustomTooltip to
a const arrow with an explicit type annotation (e.g., const CustomTooltip = ({
active, payload, label }: TooltipProps<number, string>): JSX.Element | null => {
... }) and change AnalyticsChart to an exported const arrow with Props typed
(e.g., export const AnalyticsChart = ({ chart }: Props): JSX.Element => { ...
}); preserve existing logic/JSX and imports, and apply the same refactor for
other function declarations in this module (around the 57-184 range) to match
the repository convention.

app/me/analytics/page.tsx (2)

105-113: Refactor activity-filter buttons to use handle* handlers and clsx.

Line 107 uses inline click logic, and Lines 109-113 use ternary class composition; both conflict with repo conventions.

As per coding guidelines, "For conditional classes, prefer clsx or similar helper functions over ternary operators in JSX" and "Event handlers should start with 'handle' prefix (e.g., handleClick, handleSubmit)".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/analytics/page.tsx` around lines 105 - 113, Replace the inline click
handler and ternary className on the activity filter buttons with a named
handler and clsx usage: create a handler named handleActivityFilterClick (or
similar) that calls setActivityFilter(f) and use it as the button's onClick, and
replace the template literal/ternary in className with clsx(...) combining the
base classes and conditional classes using activityFilter === f; reference the
existing setActivityFilter, activityFilter and the button render that uses
key={f} and f to locate where to change.

---

30-126: Use typed const-arrow components for AnalyticsContent and AnalyticsPage.

Both components are declared with function syntax; repository standard prefers typed const-arrow declarations.

As per coding guidelines, "Prefer const arrow functions with explicit type annotations over function declarations".

Also applies to: 128-137

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/me/analytics/page.tsx` around lines 30 - 126, Convert the function
declarations to typed const-arrow components: replace "function
AnalyticsContent()" with "const AnalyticsContent: React.FC = () => { ... }"
(keeping all existing hooks/useMemo/useState and return JSX intact), and replace
the page export (currently "function AnalyticsPage" or default function) with
"const AnalyticsPage: React.FC = () => { ... }" and export default
AnalyticsPage; ensure you import React types if needed and keep component names
AnalyticsContent and AnalyticsPage unchanged so references (AnalyticsBentoGrid,
ActivityFeed, etc.) continue to work.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.